<template>
  <div class="page">
    <el-container>
      <el-aside class="container-left">
        <Draggable :list="strategyList" :sort="false" itemKey="id" chosen-class="chosenClass" :group="{ name: 'componentsGroup', pull: 'clone', put: false }">
          <template #item="{ element }">
            <div class="item">
              <div class="title">{{ element.label }}</div>
            </div>
          </template>
        </Draggable>
      </el-aside>
      <el-container>
        <el-header class="container-header">
          <div class="header-left">
            <Draggable :list="symbolList" :sort="false" itemKey="id" class="header-wrap" :group="{ name: 'componentsGroup', pull: 'clone', put: false }">
              <template #item="{ element }">
                <div class="item">
                  <div class="title">{{ element.label }}</div>
                </div>
              </template>
            </Draggable>
          </div>
          <div class="header-middle">
            <el-button type="primary" @click="magnify">放大</el-button>
            <el-button type="primary" @click="lessen">缩小</el-button>
          </div>
          <div class="header-right">
            <el-button type="primary" @click="addTier">添加层级</el-button>
            <el-button type="primary" @click="onSave">保存</el-button>
            <el-button type="primary" @click="onDelete">删除</el-button>
          </div>
        </el-header>
        <el-main class="container-main">
          <div class="content" :style="scale">
            <div v-for="(tier, tierIndex) in tierList" :key="tierIndex" @click.stop="clickLevelBox(tier.uid, tierIndex)">
              <Draggable
                class="tier"
                :class="{ 'tire-active': curTierUid == tier.uid }"
                :list="tier.cloneList"
                itemKey="id"
                @choose="onChoose"
                :animation="100"
                :group="{ name: 'componentsGroup', pull: false }"
                sortable-ghost="sortable-chosen"
                chosen-class="sortable-chosen"
                ghost-class="ghost"
              >
                <template #item="{ element, index }">
                  <div
                    class="tag"
                    :class="{ selected: index === curTagIndex && tierIndex == curTierIndex }"
                    @click.stop
                    @click="selectTag(tier, element, index, tierIndex)"
                    @mouseup="onDeselect"
                  >
                    {{ element.label }}
                  </div>
                </template>
              </Draggable>
            </div>
          </div>
        </el-main>
      </el-container>
      <el-aside class="container-right">
        <div class="title">属性配置</div>
        <div class="config">
          <el-form-item label="层级">
            <el-select v-model="tierValue" placeholder="请选择" @change="change">
              <el-option :label="`层级${index + 1}`" :value="index" v-for="(item, index) in tierList" />
            </el-select>
          </el-form-item>
          <el-form-item label="字号">
            <el-select v-model="tier" placeholder="please select your zone">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
        </div>
      </el-aside>
    </el-container>
    <!-- <Test1></Test1> -->
  </div>
</template>

<script setup>
import { reactive, ref, defineProps, toRefs, defineExpose, computed } from "vue";
import Draggable from "vuedraggable";
import { uniqueId } from "lodash-es";
import { ElMessage } from "element-plus";

const curTagIndex = ref(undefined);
const curTierIndex = ref(undefined);
const curTierUid = ref(undefined);
const tierValue = ref(undefined);
const scaleValue = ref(1);
const strategyList = ref([
  {
    label: "策略1",
    id: 1,
  },
  {
    label: "策略2",
    id: 2,
  },
  {
    label: "策略3",
    id: 3,
  },
]);

const symbolList = ref([
  {
    label: "&",
    id: 1,
  },
  {
    label: "|",
    id: 2,
  },
  {
    label: "(",
    id: 3,
  },
  {
    label: ")",
    id: 4,
  },
  {
    label: "[",
    id: 5,
  },
  {
    label: "]",
    id: 6,
  },
  {
    label: "{",
    id: 7,
  },
  {
    label: "}",
    id: 8,
  },
]);

const tierList = ref([
  {
    uid: uniqueId(),
    cloneList: [],
  },
]);

const clickLevelBox = (tierUid, tierIndex) => {
  console.log("clickLevelBox", tierUid);
  console.log("tierIndex", tierIndex);
  curTierUid.value = tierUid;
  tierValue.value = tierIndex;
  curTierIndex.value = tierIndex;

  curTagIndex.value = undefined;
};

const scale = computed(() => {
  return {
    transform: `scale(${scaleValue.value})`,
    transformOrigin: `top left`,
  };
});

const addTier = () => {
  tierList.value.push({
    uid: uniqueId(),
    cloneList: [],
  });
};
function onChoose(evt) {
  console.log("onChoose", evt);
}
function selectTag(item, element, tagIndex, tierIndex) {
  console.log("selectTag", item, element);
  curTagIndex.value = tagIndex;
  curTierIndex.value = tierIndex;

  // 取消选中层级框
  curTierUid.value = undefined;
}

const onSave = () => {
  console.log("保存");
  console.log("tierList", tierList);
};
const onDelete = () => {
  // 删除层级中选中的tag
  if (curTagIndex.value !== undefined && curTierIndex.value !== undefined) {
    tierList.value[curTierIndex.value].cloneList.splice(curTagIndex.value, 1);
  }

  if (curTierUid.value !== undefined) {
    // 如果tierList剩下一条则不允许删除
    if (tierList.value.length === 1) {
      ElMessage({
        message: "请至少保留一个层级框",
        type: "warning",
      });
      return;
    }
    // 根据tierUid删除选中的tier
    const index = tierList.value.findIndex((item) => item.uid === curTierUid.value);
    tierList.value.splice(index, 1);
  }

  curTierUid.value = undefined;
  curTagIndex.value = undefined;
};

function change(index) {
  //  根据curTierIndex.valu和index 调换tierList位置
  const temp = tierList.value[index];
  console.log("temp", temp);
  tierList.value[index] = tierList.value[curTierIndex.value];
  tierList.value[curTierIndex.value] = temp;
}

function magnify() {
  scaleValue.value += 0.1;
}

function lessen() {
  scaleValue.value -= 0.1;
}

//暴露state和play方法
defineExpose({});
</script>

<style scoped>
.page {
  background-color: #000;
  height: 100vh;
}
.container-left {
  height: 800px;
  background-color: pink;
  padding: 10px;
  .item {
    margin-bottom: 10px;
  }
}
.container-header {
  background-color: gray;
  display: grid;
  grid-template-columns: 1fr 200px 240px;
  align-items: center;
  .header-wrap {
    display: flex;
    align-items: center;
    height: 100%;
    width: 200px;
    .item {
      width: 40px;
      .title {
        text-align: center;
      }
    }
  }
}

.container-main {
overflow: scroll  ;
  background-color: yellow;
  padding: 0;
  .tire-active {
    border: 2px solid #aaa;
  }
  .tier {
    background-color: #eee;
    height: 80px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    .tag {
      border: 1px solid #000;
      padding: 4px 8px;
      cursor: pointer;
    }
  }
}
.container-right {
  background-color: #e3d5e32e;
  .title {
    font-weight: 600;
    border: 1px solid #ccc;
    width: 100%;
    height: 58px;
    line-height: 58px;
    padding: 0 8px;
  }
  .config {
    padding: 10px;
  }
}
.selected {
  transform: scale(1.1);
}
</style>
